import { useStore } from '../store/useStore'
import { useState } from 'react'
import { toast } from 'react-toastify'

export default function Header({ onOpenOrders, onOpenAddress, onToggleSidebar }) {
  const { setUploadedImage, setModelData } = useStore()
  const [theme, setTheme] = useState('dark')
  
  const toggleTheme = () => {
    const newTheme = theme === 'dark' ? 'light' : 'dark'
    setTheme(newTheme)
    toast.info(`已切换到${newTheme === 'dark' ? '深色' : '浅色'}模式`)
  }
  

  return (
    <header className="fixed top-0 left-0 right-0 z-50 border-b elevation-1" style={{
      background: 'rgba(23, 23, 23, 1)',
      borderBottom: '1px solid rgba(56, 139, 253, 0.3)',
      height: '72px'
    }}>
      <div className="h-full px-4 flex items-center justify-between">
        {/* 左侧：菜单按钮和Logo */}
        <div className="flex items-center gap-3">
          <button 
            onClick={onToggleSidebar}
            className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-all nav-hover"
            aria-label="切换侧边栏"
          >
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
          
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-400 flex items-center justify-center text-white font-bold text-xl shadow-lg">
              3D
            </div>
            <div className="hidden lg:block">
              <h1 className="text-xl font-bold text-glow" style={{color: 'rgb(56, 139, 253)'}}>
                3D定制工坊
              </h1>
              <p className="text-xs text-gray-400">专业模型定制平台</p>
            </div>
          </div>
        </div>

        {/* 中间：主导航 (仅桌面) */}
        <nav className="hidden xl:flex items-center gap-2">
          <button className="px-4 py-2 text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition-all nav-hover font-medium">
            3D定制
          </button>
          <button 
            onClick={onOpenOrders}
            className="px-4 py-2 text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition-all nav-hover font-medium"
          >
            我的订单
          </button>
          <button className="px-4 py-2 text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition-all nav-hover font-medium">
            帮助中心
          </button>
        </nav>

        {/* 右侧：主题、用户 */}
        <div className="flex items-center gap-2">
          {/* 主题切换 */}
          <button 
            onClick={toggleTheme}
            className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-all nav-hover"
            aria-label="切换主题"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
            </svg>
          </button>

          {/* 订单按钮 */}
          <button
            onClick={onOpenOrders}
            className="px-4 py-2 bg-gradient-to-r from-blue-500 to-cyan-400 text-white font-medium rounded-lg hover:scale-105 transition-all shadow-lg"
          >
            我的订单
          </button>
        </div>
      </div>
    </header>
  )
}
